import React, { useEffect, useState, forwardRef, useImperativeHandle, useRef } from 'react'
import { Text, View, ScrollView, PageContainer, Image, Textarea } from '@tarojs/components'
import { getNavTop, getFullSrcs } from '@/utils/Helper'
import { AtDrawer, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import Taro from '@tarojs/taro'
import { listAPI, updateAPI, deleteAPI,listForCustomer } from '../utils/request'
import styles from './index.module.scss'

const DrawerContent = forwardRef((props:any, ref) => {
  const phoneNumber = useRef<any>('15938313592')

  const [content, setContent] = useState<any>([])
  const [tabIndex, setTabIndex] = useState<any>()
  const [showState, setShowState] = useState<any>(false)
  const [popVisible, setPopVisible] = useState<any>(false)
  const [renameVisible, setRenameVisible] = useState<any>(false)
  const [delVisible, setDelVisible] = useState<any>(false)
  const [popState, setPopState] = useState<any>({})
  const [tabContent, setTabContent] = useState<any>('')
  const [itemValue, setItemValue] = useState<any>({})

  const queryList = () => {
    listAPI({ phoneNumber: phoneNumber.current, pageNo: 1, pageSize: 100 }).then((res) => {
      if (res.code === 200) {
        setContent(res.data.rows)
      }
    })
  }

  // 使用 useImperativeHandle 自定义暴露给父组件的实例值
  useImperativeHandle(ref, () => ({
    // 暴露 handleClick 方法给父组件
    open: () => {
      queryList()
      setShowState(true)
    },
    close: () => {
      setShowState(false)
      console.log('close')
    }
  }))

  const copyLess = (event, item) => {
    console.log(event, item.pageTitle, 'eventeventeventevent')
    setPopState(event)
    setPopVisible(!popVisible)
    setItemValue(item)
    // setTextareaValue(item.pageTitle)
    // setTextareaValue('的撒合法开始阶段和付款就阿斯顿回复可见哈士大夫看见哈撒可见度发挥艰苦撒旦回复看')
  }
  const renameFun = () => {
    setRenameVisible(true)
  }
  const delFun = () => {
    setDelVisible(true)
  }

  //重命名弹窗的方法
  const renameClose = () => {
    console.log('handleClose')
    setRenameVisible(false)
  }
  const renameCancel = () => {
    console.log('handleCancel')
    setRenameVisible(false)
  }
  const renameConfirm = () => {
    console.log('handleConfirm')
    updateAPI({ id: itemValue.id, title: itemValue.pageTitle }).then((res) => {
      if (res.code === 200) {
        queryList()
        setRenameVisible(false)
      }
    })
  }
  const textareaInput = (event) => {
    console.log(event, 'eventeventeventevent')

    setItemValue({ ...itemValue, pageTitle: event.detail.value })
  }

  //删除弹窗的方法
  const delClose = () => {
    setDelVisible(false)
  }
  const delCancel = () => {
    setDelVisible(false)
  }
  const delConfirm = () => {
    deleteAPI({ id: itemValue.id }).then((res) => {
      if (res.code === 200) {
        queryList()
        setDelVisible(false)
        props.delConfirm(itemValue.id)
      }
    })
  }

  //点击历史记录的每一项时触发
  const historyItemClick = (item,index) => {
    setTabIndex(index)
    setTabContent(item)
    props.clickItem(item)
  }
  return (
    <>
      <AtDrawer show={showState} mask onClose={() => setShowState(false)}>
        <View style={{ paddingTop: `${getNavTop()}px` }} onClick={() => setPopVisible(false)}>
          <View className={styles['content_list']}>
            {content.map((item, index) => {
              return (
                <View
                  className={tabContent.id === item.id ? styles['content_list_item_active'] : styles['content_list_item']}
                  key={index}
                  onClick={() => {
                    historyItemClick(item, index)
                  }}
                  onLongPress={(event) => {
                    copyLess(event, item)
                  }}
                >
                  {item.pageTitle}
                </View>
              )
            })}
            {popVisible && (
              <View
                className={styles['long_press']}
                style={{ left: `${popState.detail.x}px`, top: `${popState.detail.y - getNavTop()}px` }}
              >
                <View className={styles['long_press_rename']} onClick={renameFun}>
                  <Image src={getFullSrcs('documents/edi.jpg')}></Image>
                  <Text>重命名</Text>
                </View>
                <View className={styles['long_press_del']} onClick={delFun}>
                  <Image src={getFullSrcs('documents/del.jpg')}></Image>
                  <Text>删除</Text>
                </View>
              </View>
            )}
          </View>
        </View>
      </AtDrawer>
      <View className={styles['modal_rename']}>
        <AtModal isOpened={renameVisible} onClose={renameClose}>
          <AtModalHeader>
            <View className={styles['modal_rename_title']}>重命名对话</View>
          </AtModalHeader>
          <AtModalContent>
            <Textarea
              className={styles['modal_rename_textarea']}
              autoHeight
              value={itemValue.pageTitle}
              onInput={textareaInput}
            />
          </AtModalContent>
          <AtModalAction>
            <View className={styles['modal_rename_bottom']}>
              <View className={styles['modal_rename_cancel']} onClick={renameCancel}>
                取消
              </View>
              <View className={styles['modal_rename_finish']} onClick={renameConfirm}>
                完成
              </View>
            </View>
          </AtModalAction>
        </AtModal>
      </View>
      <View className={styles['modal_del']}>
        <AtModal isOpened={delVisible} onClose={delClose}>
          <AtModalHeader>
            <View className={styles['modal_del_title']}>删除对话</View>
          </AtModalHeader>
          <AtModalContent>删除后，该对话将不可恢复。确认删除吗？</AtModalContent>
          <AtModalAction>
            <View className={styles['modal_del_bottom']}>
              <View className={styles['modal_del_cancel']} onClick={delCancel}>
                取消
              </View>
              <View className={styles['modal_del_delete']} onClick={delConfirm}>
                删除
              </View>
            </View>
          </AtModalAction>
        </AtModal>
      </View>
    </>
  )
})
export default DrawerContent
